{% extends "base.html" %}

{% block title %}{{ user.username }}的个人主页{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <!-- 用户信息卡片 -->
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-body text-center">
                    {% if user.avatar_data %}
                        <img src="{{ url_for('get_avatar', user_id=user.id) }}" 
                             class="rounded-circle mb-3" 
                             alt="头像" 
                             style="width: 120px; height: 120px; object-fit: cover;">
                    {% else %}
                        <img src="{{ url_for('static', filename=user.avatar) }}" 
                             class="rounded-circle mb-3" 
                             alt="头像" 
                             style="width: 120px; height: 120px; object-fit: cover;">
                    {% endif %}
                    <h4 class="card-title">{{ user.username }}</h4>
                    <p class="text-muted">
                        {% if user.bio %}
                            {{ user.bio }}
                        {% else %}
                            这个人很懒，什么也没留下...
                        {% endif %}
                    </p>
                    <div class="d-flex justify-content-around text-center mt-3">
                        <div>
                            <h5>{{ user.points }}</h5>
                            <small class="text-muted">积分</small>
                        </div>
                        <div>
                            <h5>{{ user.cigarette_butts }}</h5>
                            <small class="text-muted">烟蒂回收</small>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-transparent">
                    <div class="row text-center">
                        <div class="col">
                            <small class="text-muted">城市</small>
                            <p class="mb-0">{{ user.city or '未设置' }}</p>
                        </div>
                        <div class="col">
                            <small class="text-muted">性别</small>
                            <p class="mb-0">{{ user.gender or '未设置' }}</p>
                        </div>
                        <div class="col">
                            <small class="text-muted">年龄</small>
                            <p class="mb-0">{{ user.age or '未设置' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 积分记录 -->
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-header bg-transparent">
                    <h5 class="mb-0">积分记录</h5>
                </div>
                <div class="card-body">
                    <div class="list-group list-group-flush">
                        {% for record in point_records %}
                            <div class="list-group-item">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="mb-0">{{ record.record_type }}</h6>
                                        <small class="text-muted">{{ record.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</small>
                                    </div>
                                    <span class="badge {% if record.points > 0 %}bg-success{% else %}bg-danger{% endif %}">
                                        {{ record.points }} 积分
                                    </span>
                                </div>
                            </div>
                        {% else %}
                            <div class="text-center text-muted py-3">
                                暂无积分记录
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 